<template>
	<Container>
		<view class="mine-index">
			<view class="header">
				<view class="top" :style="systemInfo.statusBarHeight ? {paddingTop: systemInfo.statusBarHeight + 70 + 'rpx'}:{}">
					<view class="user">
						<image class="avatar" src="/static/logo.png" mode=""></image>
						<view class="name">{{user.username}}</view>
					</view>
					<view class="controls">
						<!-- <view class="change">
							<switch :checked="isDark" @change="handleChangeSkin" style="transform:scale(0.7)" color="#000" />
						</view> -->
						<view class="daka" @click="clockIn">
							<image src="/static/daka.svg" mode=""></image>
							<text>{{isClockIn ? '已打卡' : '打卡'}}</text>
						</view>
					</view>
				</view>
				<view class="data">
					<view class="data-item">
						<view class="data-num">1</view>
						<view class="data-lab">已连续打卡</view>
					</view>
					<view class="data-item">
						<view class="data-num">1</view>
						<view class="data-lab">记账总天数</view>
					</view>
					<view class="data-item">
						<view class="data-num">1</view>
						<view class="data-lab">记账总笔数</view>
					</view>
				</view>
			</view>

			<view class="main">
				<view class="menus">
					<view class="menu" @click="menuAction('msgs')">
						<image src="/static/msg.svg" mode="widthFix"></image>
						<text>消息</text>
					</view>
					<view class="menu">
						<image src="/static/huizhang.svg" mode="widthFix"></image>
						<text>我的徽章</text>
					</view>
					<view class="menu" @click="menuAction('integral')">
						<image src="/static/jifen.svg" mode="widthFix"></image>
						<text>我的积分</text>
					</view>
					<view class="menu" @click="menuAction('calc')">
						<image src="/static/loan-calc.svg" mode="widthFix"></image>
						<text>贷款计算器</text>
					</view>
				</view>
				<view class="module">
					<view class="list">
						<view class="item" @click="menuAction('lotteryDraw')">
							<image src="/static/bill.svg" mode=""></image>
							<text>快乐时刻</text>
						</view>
					</view>
				</view>
				<view class="module">
					<view class="list">
						<view class="item">
							<image src="/static/bill.svg" mode=""></image>
							<text>我的账单</text>
						</view>
						<view class="item">
							<image src="/static/home-bill.svg" mode=""></image>
							<text>家庭账单</text>
						</view>
						<view class="item">
							<image src="/static/facebook.svg" mode=""></image>
							<text>意见反馈</text>
						</view>
						<view class="item">
							<image src="/static/setting.svg" mode=""></image>
							<text>设置</text>
						</view>
					</view>
				</view>
			</view>

		
		</view>
		<clockPopup v-model="showClockSuccess" />
	</Container>

</template>

<script>
	import clockPopup from './components/clock-popup.vue'
	import {getUserInfoApi} from '@/http/user.js'
	export default {
		components: {
			clockPopup
		},
		data() {
			return {
				systemInfo: {}, // 系统信息
				showClockSuccess: false, // 是否显示打卡成功弹窗
				user: {
					username: '天王星',
					isDark: uni.getStorageSync('theme') === 'dark' ? true : false,
				},
				isClockIn: false, // 今日是否已签到
			};
		},
		async onLoad () {
			this.systemInfo = await uni.getSystemInfo()
			this.getUserInfo()
		},
		methods: {
			/** 获取用户信息 **/
			async getUserInfo () {
				const {ok, data} = await getUserInfoApi()
				
			},
			handleChangeSkin() {
				const isDark = this.isDark = !this.isDark;
				const theme = isDark ? 'dark' : 'light';
				console.log(theme);
				this.setCurThemeType(theme);
				//切换的主题缓存起来
				uni.setStorageSync('theme', theme);
			},
			/** 工具跳转 **/
			menuAction (type) {
				switch (type) {
					case 'calc': 
						uni.navigateTo({
							url: '/pages/mine/calc/loan-calc'
						})
						break;
					case 'lotteryDraw':
						uni.navigateTo({
							url: '/pages/mine/lottery-draw'
						})
						break;
					case 'integral':
						uni.navigateTo({
							url: '/pages/mine/integral'
						})
						break;
					case 'msgs':
						uni.navigateTo({
							url: '/pages/mine/msgs'
						})
						break;
						
					
				}
			},
			/** 打卡 **/
			clockIn () {
				if(this.isClockIn) {
					console.log('已签到')
					uni.navigateTo({
						url: '/pages/mine/clock-in',
					})
				} else {
					this.showClockSuccess = true
					this.isClockIn = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-index {
		.header {
			min-height: 300rpx;
			background-color: $theme-color;
			padding: 32rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user {
					display: flex;
					align-items: center;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}

					.name {
						color: #fff;
						font-weight: 600;
						font-size: 36rpx;
					}
				}

				.controls {
					.change {
						height: 50rpx;
					}

					.daka {
						display: flex;
						align-items: center;
						height: 50rpx;
						padding: 4rpx 16rpx;
						background-color: #fff;
						border-radius: 30rpx;

						image {
							width: 35rpx;
							height: 35rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 26rpx;
							color: #474747;
						}
					}
				}
			}

			.data {
				padding: 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.data-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.data-num {
						font-size: 40rpx;
						color: #fff;
					}

					.data-lab {
						font-size: 26rpx;
						color: #fff;
						opacity: 0.6;
					}
				}
			}
		}

		.main {
			padding: 0 32rpx;

			.menus {
				margin: 0 auto 0;
				display: flex;
				box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
				border-radius: 16rpx;
				position: relative;
				top: -40rpx;
				z-index: 1;
				background-color: #fff;

				.menu {
					padding: 24rpx 0;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						flex: none;
					}

					text {
						color: #474747;
						font-size: 24rpx;
						margin-top: 8rpx;
					}
				}
			}

			.module {
				box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				.list{
					padding: 0 32rpx;
					.item {
						padding: 20rpx 0;
						height: 110rpx;
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #eee;
						&:last-child {
							border: none;
						}
						image {
							width: 50rpx;
							height: 50rpx;
						}
						text {
							font-size: 26rpx;
							padding-left: 20rpx;
						}
					}
				}
			}
		}

	}
</style>